<template>
    <div id="articleAdd" >
        <div align="left" style="float:left;margin-left:144px;margin-top:10px" >
            <router-link to="/myCodeTxt" style="text-decoration: none;color:black">
                <img src="@/assets/index.png" width="30px" height="20px" style="vertical-align:middle;"/>
                <span style="color:#a4a2a2" >首页</span>
            </router-link>
        </div>

        <el-header style="text-align: right; font-size: 14px;margin-left:100px;margin-top:-50px;margin-right:100px;height:40px;line-height: 44px;">
            <div style="display:inline-block">
                <!-- <router-link to="/myRichEditor" style="text-decoration: none;color:black">
                    <i class="el-icon-edit"></i>
                    写博客
                </router-link> -->
                <div style="display:inline-block;cursor:pointer" @click="writeBlog()">
                    <i class="el-icon-edit"></i>
                    写博客
                </div>
            </div>
            <div  style="display:inline-block;margin-left:5px">
                <i class="el-icon-message-solid"></i>&nbsp;
            </div>
            
            <div  style="display:inline-block;cursor:pointer">
                <router-link to="/person" style="text-decoration: none;color:black" >
                     {{username}}
                </router-link>
                <span style="color:#a2a2a2"  @click="removeUserInfo()" v-if="username">退出</span>
                <router-link to="/login" style="text-decoration: none;color:black" v-if="!username">
                    登录 / 注册
                </router-link>
            </div>
        </el-header>

        <el-container style="height: 640px;">
            <el-aside width="180px" style="background-color: white;margin-left:100px;border: 1px solid #eee">
                <el-menu>
                        <router-link to="/myRichEditor" style="text-decoration: none;color:black">
                            <el-menu-item index="1-1" style="padding-left: 46px">
                                    文本编辑
                            </el-menu-item>
                        </router-link>
                        <el-menu-item index="1-2" style="padding-left: 46px" @click="goMyBlog()">
                                我的博客
                        </el-menu-item>
                    <el-submenu index="1">
                            <template slot="title" ><i class="el-icon-s-tools"></i>博客管理</template>
                            
                            <router-link to="/manageBlog" style="text-decoration: none;color:#a2a2a2;cursor:pointer;">
                                <el-menu-item-group class="aslide">
                                    <template slot="title" >
                                            文章管理
                                    </template>
                                </el-menu-item-group>
                            </router-link>
                       
                            <router-link to="/xxxxx" style="text-decoration: none;color:#a2a2a2;cursor:pointer">
                                <el-menu-item-group class="aslide">
                                    <template slot="title">评论管理</template>
                                </el-menu-item-group>
                            </router-link>


                            <router-link to="/manageType" style="text-decoration: none;color:#a2a2a2;cursor:pointer">
                                <el-menu-item-group class="aslide">
                                    <template slot="title">
                                            分类管理
                                    </template>
                                </el-menu-item-group>
                            </router-link>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-money"></i>内容收益</template>

                        <router-link to="/xxxxx" style="text-decoration: none;color:#a2a2a2;cursor:pointer">
                            <el-menu-item-group class="aslide">
                                <template slot="title">收益中心</template>
                            </el-menu-item-group>
                        </router-link>

                        <router-link to="/xxxxx" style="text-decoration: none;color:#a2a2a2;cursor:pointer">
                            <el-menu-item-group class="aslide">
                                <template slot="title">博客打赏</template>
                            </el-menu-item-group>
                        </router-link>
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-s-tools"></i>设置管理</template>
                        <router-link to="/xxxxx" style="text-decoration: none;color:#a2a2a2;cursor:pointer">
                            <el-menu-item-group class="aslide">
                                <template slot="title">博客管理</template>
                            </el-menu-item-group>
                        </router-link>

                        <router-link to="/xxxxx" style="text-decoration: none;color:#a2a2a2;cursor:pointer">
                            <el-menu-item-group class="aslide">
                                <template slot="title">博客模块管理</template>
                            </el-menu-item-group>
                        </router-link>
                    </el-submenu>
                </el-menu>
                <hr>
                <div style="margin-top:30px">
                    <img src="../assets/alipay.png" width="160px" class="img"><br/>
                    <span>请我喝杯咖啡--支付宝</span>
                </div>
                <hr>
                <div style="margin-top:10px">
                    <img src="../assets/weixinpay.png" width="160px"  class="img"><br/>
                    <span>请我喝杯咖啡--微信</span>
                </div>


            </el-aside>
        
            <el-container style="margin-left:8px;margin-right:100px;margin-top:5px;"  class="contain" >
                <el-main >
                    <router-view/>
                </el-main>
            </el-container>
            

        </el-container>

    </div>
</template>

<script>
import storage from '@/router/storage.js'
export default {
    data(){
        return{
            username:''
        }
    },
    methods:{
         writeBlog(){
            if(this.username == undefined || this.username == ""){
                this.$message({
                    type: 'warning',
                    message: '请先登陆/注册'
                }); 
                return false;
            }

           this.$router.push({path:'/myRichEditor'});
        },
        //注销清除localstorage中的数据
        removeUserInfo(){
            storage.remove("username");
            this.username = "";

            //后台session清除
            this.axios.post('/user/loginOut').then(response=> {
                if(response.data.code == 500){
                    this.$message({
                        type: 'warning ',
                        message: response.data.message
                    }); 
                }else{
                    //  this.$router.push({name:'home',params:{'username':this.username.trim()}}); //此时username为空
                     window.location.href="home";
                }
            }).catch(error => {
                
            });
        },
        goMyBlog(){
            this.$router.push({path:'/myBlogList'});
        }
    },
    mounted(){
        this.username = storage.get("username");
    }
}
</script>

<style  scoped>
.img{
    cursor: pointer;  
    transition: all 0.6s; 
}
.img:hover{
    transform: scale(1.4);   
}

.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 30px;
}

.el-aside {
    color: #333;
}

.aslide{
    margin-left:-17px
}
.aslide:hover{
    margin-left:-17px;
    background:#ecf5ff;
}

.contain{
    background-image:url(../assets/back_img.png)
}


</style>